<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i> 蜗牛影院系统——用户管理
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div>
                <el-form :inline="true" :model="formUser" class="demo-form-inline">
                    <el-form-item label="用户姓名">
                        <el-input v-model="formUser.userName" placeholder="用户姓名"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号">
                        <el-input v-model="formUser.userMobile" placeholder="用户手机号"></el-input>
                    </el-form-item>
                    <el-form-item label="用户状态">
                        <el-select v-model="formUser.userState" placeholder="用户状态">
                            <el-option label="全部" value="2"></el-option>
                            <el-option label="正常" value="1"></el-option>
                            <el-option label="已冻结" value="0"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">查询</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <el-button type="primary" @click="handleClickAll()">批量冻结</el-button>
            <div style="margin-top: 10px">
                <el-table
                        ref="multipleTable"
                        :data="User"
                        tooltip-effect="dark"
                        style="width: 100%"
                        @selection-change="handleSelectionChange">
                    <el-table-column
                            type="selection"
                            width="70">
                    </el-table-column>
                    <el-table-column
                            prop="id"
                            label="编号"
                            width="70">
                    </el-table-column>
                    <el-table-column
                            prop="username"
                            label="姓名"
                            width="90">
                    </el-table-column>
                    <el-table-column
                            prop="userPhone"
                            label="手机号"
                            width="140">
                    </el-table-column>
                    <el-table-column
                            prop="userEmail"
                            label="邮箱"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="mname"
                            label="观影记录"
                            width="400">
                            <template slot-scope="scope">
                            <span v-if="scope.row.mname == null">暂 无 观 影 记 录</span>
                            <span v-if="scope.row.mname!=null">{{'《'+scope.row.mname+'》'}}</span>
                            </template>
                    </el-table-column>
                    <el-table-column
                            prop="status"
                            label="状态"
                            width="70">
                        <template slot-scope="scope">
                            <span v-if="scope.row.status == 0">冻结</span>
                            <span v-if="scope.row.status == 1">正常</span>
                        </template>
                    </el-table-column>
                    
                    <!-- <el-table-column
                            label="操作"
                            width="100">
                        <template slot-scope="scope">
                            <el-button @click="handleClick(scope.row)" type="text" size="small">冻结</el-button>
                            <el-button @click="handleEdit(scope.row)" type="text" size="small">修改</el-button>
                        </template>
                    </el-table-column> -->
                </el-table>
            </div>
            <div>
                <div class="block">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="currentPage"
                            :page-sizes="[5, 10, 20, 50]"
                            :page-size="pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total=total>
                    </el-pagination>
                </div>
            </div>
            <div v-if="dialogFormUpdateVisible==true">
                <el-dialog title="修改用户信息" :visible.sync="dialogFormUpdateVisible">
                    <update-user :uid="uid" @changeFormUpdateVisible="test($event)"></update-user>
                </el-dialog>
            </div>
        </div>
    </div>
</template>

<script>
    import UpdateUser from '../model/UpdateUser';

    export default {
        name: 'UserCon',
        data() {
            return {
                formUser: {
                    userName: '',
                    userMobile: '',
                    userState: '2'
                },
                User: [],
                currentPage: 1,
                total:0,
                pageSize:5,
                dialogFormUpdateVisible: false,
                uid:'',
                multipleSelection:[],
                array:[]
            };
        },
        methods: {
            onSubmit() {
                console.log('submit!');
                this.axios.get('http://localhost:8080/admin/manager/list', {
                    params: {
                        userName: this.formUser.userName,
                        userMobile: this.formUser.userMobile,
                        userState: this.formUser.userState,
                        now: this.currentPage,
                        size: this.pageSize,
                    }
                }).then(data => {
                    console.log(data.data.data.list);
                    this.User = data.data.data.list;
                    this.total=data.data.data.total;
                    this.currentPage=data.data.data.currentPage;
                    this.pageSize=data.data.data.pageSize;
                });
            },
            handleClick(row) { //冻结用户的账户
                console.log(row.id);
               if (confirm("确认冻结该用户吗?")) {
                   if (row.status==0){
                       alert("该用户已被冻结,请重新选择");
                       return;
                   } ;
                   // let url = this.base_path + "/admin/user/del/" + row.userId;
                   let url = this.base_path + "/admin/manager/updateUser/"+row.id;
                    this.axios.post(url,
                        {
                        } ).then(data => {
                        console.log(data);
                        if (data.data.code==200) {
                            this.onSubmit();
                            alert("操作成功");
                        }else {
                            alert(data.data.msg);
                        }
                    })
                }
            },
            handleClickAll(){//批量冻结所有用户
                //得到所有的选中用户
                let ids = [];
                var users = this.$refs.multipleTable.selection;
              if (users.length==0) {
                  alert("请选择需要冻结的用户");
                  return;
              }
                if (confirm("确认冻结该批次用户吗?")) {
                    for (var i = 0; i < users.length; i++) {
                        console.log(users[i]);
                        ids.push(users[i].id);
                        if (users[i].status==0){
                            alert("您选择的数据含有已冻结的用户,请重新选择");
                            return;
                        } ;
                    }
                    let url = 'http://localhost:8080/admin/manager/updateAll';
                    this.axios.post(url,ids).then(data => {
                        console.log(data);
                        console.log('xxxxxxxxxxx'+ids)
                        if (data.data.code==200) {
                            this.onSubmit();
                        }else {
                            alert(data.data.msg);
                        }
                    })
                }

            },
            handleEdit(row){//修改当前用户
                this. dialogFormUpdateVisible = true;
                this.uid=row.id;
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pageSize=val
                this.onSubmit();
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.currentPage=val
                this.onSubmit();
            },
            test:function(event){
                this.dialogFormUpdateVisible=event.param
                this.onSubmit();
            },
        },

        created: function() {
            this.onSubmit();
        },
        components:{
            "UpdateUser":UpdateUser
        }
    };
</script>

<style scoped>

</style>
